import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import '../style/demo.css'
import Case1 from './Case1';
import Case2 from './Case2';
import Case3 from './Case3';
import Case4 from './Case4';
import Case5 from './Case5';

function Demo() {
	return (
		<BaseLayout className="demo-grid">
		    <h2 className="intro-title">Grid 栅格</h2>
		    <p className="intro-content">24 栅格系统。</p>
			
			<h3 className="show-case-title">代码演示</h3>
			
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
			<Case4></Case4>
			<Case5></Case5>

		    {/*介绍*/}
			<h3 className="base-title">API</h3>
			<h4 className="base-title">Row</h4>

			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>align</td>
						<td>垂直对齐方式</td>
						<td>top | middle | bottom</td>
						<td>top</td>
					</tr>
					<tr>
						<td>justify</td>
						<td>水平排列方式</td>
						<td>start | end | center | space-around | space-between</td>
						<td>start</td>
					</tr>
					<tr>
						<td>wrap</td>
						<td>是否自动换行</td>
						<td>boolean</td>
						<td>true</td>
					</tr>
				</tbody>
			</table>

			<h4 className="base-title">Col</h4>

			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>span</td>
						<td>栅格占位格数，为 0 时相当于 display: none</td>
						<td>number</td>
						<td>--</td>
					</tr>
					<tr>
						<td>order</td>
						<td>栅格顺序</td>
						<td>number</td>
						<td>0</td>
					</tr>
					<tr>
						<td>offset</td>
						<td>栅格左侧的间隔格数，间隔内不可以有栅格</td>
						<td>number</td>
						<td>0</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
